<template>
  <v-main class="share-play-page-main">
    <v-container class="share-play-page-container">
      <v-row>
        <v-col :cols="12">
          <v-img
            src="https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/assets/46c893df19e01a9f856efe52c80c573.jpg"
            width="100%"
            height="auto"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            class="share-play-page-img mx-auto"
          ></v-img>
        </v-col>
        <v-col :cols="12" class="d-flex justify-center align-content-center">
          <v-sheet class="transparent subtitle-1" style="color: #ffffff; font-size: 18px">
            {{ title }}
          </v-sheet>
        </v-col>
        <v-col :cols="12" class="d-flex justify-center align-content-center">
          <v-btn icon color="#757575" @click="$router.push({ path: '/home' })">
            <v-icon :size="40"> mdi-home </v-icon>
          </v-btn>
        </v-col>
        <v-col :cols="12">
          <lyric :lyric="handleLyric" />
        </v-col>
      </v-row>
    </v-container>
    <div class="share-play-bottom-sheet d-flex justify-center align-items-center">
      <!-- <div v-if="iswx" style="position:relative;width:50px;height: 50px;">
      <wx-open-audio
        ref="wxaudio"
        :title="title"
        :src="src"
        :singer="singer"
        :cover="cover"
        style="position: absolute;left:0px;top:0px;z-index:10;width:50px;height: 50px;"
      >
        <script type="text/wxtag-template">
          <div style="width:60px;height: 60px;"></div>
        </script>
        <script type="text/wxtag-template" slot="playing">
          <div style="width:60px;height: 60px;"></div>
        </script>
      </wx-open-audio>
      <v-icon color="#757575" v-ripple :size="50">
        {{ playIcon }}
      </v-icon>
    </div> -->
      <v-icon color="#757575" :size="50" @click="play">
        {{ playIcon }}
      </v-icon>
    </div>
  </v-main>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { isWeiXin } from "../../utils/common";
// import { fenxiang } from '../../jcui/wx-api'
import Lyric from "./component/Lyric";

export default {
  name: "index",
  components: {
    Lyric,
  },
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["playIconText"]),
    zmTypeCom() {
      return (id) => {
        if (this.zmType.length > 0) {
          return this.zmType.filter((item) => item.index === id)[0].shiJiName;
        }
        return "";
      };
    },
  },
  data() {
    return {
      _audio: null,
      title: "",
      playIcon: "",
      iswx: true,
      src: "",
      singer: " ",
      cover: "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/assets/bg.jpg",
      zmType: [],
      handleLyric: "",
    };
  },
  async mounted() {
    this.iswx = isWeiXin();
    // if (this.iswx) {
    //   this._audio = this.$refs.wxaudio
    //   this._audio.onplay = () => {
    //     this.playIcon = this.playIconText.pause
    //   }
    //   this._audio.onpause = () => {
    //     this.playIcon = this.playIconText.play
    //   }
    // } else {
    this._audio = document.createElement("audio");
    // }
    this.playIcon = this.playIconText.play;
    this.zmType = await this.getZaMeiType();
    const res = await this.getInfo(this.id);

    this.src = res.dmtUrl.adUrl;
    this._audio.src = res.dmtUrl.adUrl;
    this._audio.episode = this.zmTypeCom(res.shijiIndex);
    this.title = res.mulu;
    document.title = res.mulu;
    this.handleLyric = res.lyric;
    // 设置分享
    // fenxiang(`${res.xuhao}.${res.mulu}`, `${location.origin}/#` + `/shareplaypage/${this.id}`, this.$route.meta.icon)
  },
  methods: {
    ...mapActions({ getInfo: "sgb/getItem", getZaMeiType: "sgb/getzaimeiType", getZanMeiTypeItem: "sgb/zmTypeCom" }),
    play() {
      if (this._audio.paused) {
        this._audio.play();
        this.playIcon = this.playIconText.pause;
      } else {
        this._audio.pause();
        this.playIcon = this.playIconText.play;
      }
    },
    pause() {
      this._audio.pause();
    },
  },
};
</script>

<style scoped lang="scss">
.share-play-page-main {
  background-color: #292930;
  .share-play-page-container {
    width: 100%;
    height: 100%;
    .share-play-page-img {
      border-radius: 19px;
    }
  }
  .share-play-bottom-sheet {
    width: 100%;
    height: 65px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.1));
  }
}
</style>
